<template>
  <div class="banner-img">
    <div class="banner">
      <van-swipe
        class="my-swipe"
        :autoplay="3000"
        indicator-color="white"
        @change="onChange"
        ><ul>
          <van-swipe-item v-for="item in bannerimg" :key="item.id">
            <li>
              <router-link :to="'/detailpage?id=' + item.id">
                <img :src="item.img"
              /></router-link>
            </li>
          </van-swipe-item>
        </ul>
        <!-- 指示点 -->
        <template #indicator>
          <div class="custom-indicator">
            <ol>
              <li :class="{ con: indexSwiper == 0 }"></li>
              <li :class="{ con: indexSwiper == 1 }"></li>
            </ol>
          </div>
        </template>
      </van-swipe>
    </div>
  </div>
</template>

<script>
// import { getTypeList } from "../api/home.js";
import { getBannerImg } from "../api/home.js";
export default {
  data() {
    return {
      indexSwiper: 0,
      bannerimg: null,
    };
  },
  methods: {
    onChange(index) {
      this.indexSwiper = index;
    },
    getBannerImgFun() {
      getBannerImg({id: this.$route.query.id}).then((data) => {
        this.bannerimg = data.banner;
        
      });
    },
  },
  created() {
    this.getBannerImgFun();
  },
};
</script>

<style lang="scss" scoped>
.banner {
  overflow: hidden;
  width: 100%;
  height: 113px;
  position: relative;
  ul {
    li {
      width: 100%;
      height: 113px;
      img {
        width: 100%;
        height: 100%;
        border-radius: 0px 0px 10px 10px;
      }
    }
  }
  .custom-indicator {
    width: 100%;
    position: absolute;
    left: 0px;
    bottom: 0px;
    text-align: center;
    ol {
      display: inline-block;
      margin: 0 auto;
      position: absolute;
      // bottom: -24px;
      width: 25px;

      li {
        display: inline-block;
        width: 4px;
        height: 5px;
        margin: 0px 4px;
        background-color: #75787e;
        border-radius: 50%;
        &.con {
          background-color: #cfd2d8;
        }
      }
    }
  }
}

.my-swipe .van-swipe-item {
  float: left;
  color: #fff;
  font-size: 20px;
  line-height: 113px;
  text-align: center;
}
</style>